<template>
    <div class="artist banxin">
        <div class="artist_in tanxin">
            <div class="listl">
                <div class="nav">
                    <h2 class="nav_title">推荐</h2>
                    <ul class="nav_list">
                        <li @click="$router.push('/discover/artist/hot')" :class="{'active': $route.path.includes('hot')}">
                            <i>&squarf;</i>
                            <a>推荐歌手</a>
                        </li>
                        <li @click="$router.push('/discover/artist/settle')" :class="{'active': $route.path.includes('settle')}">
                            <i>&squarf;</i>
                            <a>入驻歌手</a>
                        </li>
                    </ul>
                </div>
                <div class="nav" v-for="(item, index) in artist" :key="index">
                    <h2 class="nav_title">{{ item.name }}</h2>
                    <ul class="nav_list">
                        <li v-for="(item1,index) in item.list" :key="index"  :class="{ 'active':item1.name == $route.query.name }" @click="Go(item,item1)">
                            <i>&squarf;</i>
                            <a>{{ item1.name }}</a>
                        </li>
                    </ul>
                </div>
                <!-- <div class="nav">
                    <h2 class="nav_title">日本</h2>
                    <ul class="nav_list">
                        <li @click="navActive=10" :class="{'active' : navActive===4}"><i>&squarf;</i>华语男歌手</li>
                        <li @click="navActive=11" :class="{'active' : navActive===5}"><i>&squarf;</i>华语女歌手</li>
                        <li @click="navActive=12" :class="{'active' : navActive===6}"><i>&squarf;</i>华语组合/乐队</li>
                    </ul>
                </div>
                <div class="nav">
                    <h2 class="nav_title">日本</h2>
                    <ul class="nav_list">
                        <li @click="navActive=10" :class="{'active' : navActive===7}"><i>&squarf;</i>欧美男歌手</li>
                        <li @click="navActive=11" :class="{'active' : navActive===8}"><i>&squarf;</i>欧美女歌手</li>
                        <li @click="navActive=12" :class="{'active' : navActive===9}"><i>&squarf;</i>欧美组合/乐队</li>
                    </ul>
                </div>
                <div class="nav">
                    <h2 class="nav_title">日本</h2>
                    <ul class="nav_list">
                        <li @click="navActive=10" :class="{'active' : navActive===10}"><i>&squarf;</i>日本男歌手</li>
                        <li @click="navActive=11" :class="{'active' : navActive===11}"><i>&squarf;</i>日本女歌手</li>
                        <li @click="navActive=12" :class="{'active' : navActive===12}"><i>&squarf;</i>日本组合/乐队</li>
                    </ul>
                </div>
                <div class="nav">
                    <h2 class="nav_title">韩国</h2>
                    <ul class="nav_list">
                        <li @click="navActive=13" :class="{'active' : navActive===13}"><i>&squarf;</i>韩国男歌手</li>
                        <li @click="navActive=14" :class="{'active' : navActive===14}"><i>&squarf;</i>韩国女歌手</li>
                        <li @click="navActive=15" :class="{'active' : navActive===15}"><i>&squarf;</i>韩国组合/乐队</li>
                    </ul>
                </div>
                <div class="nav">
                    <h2 class="nav_title">其他</h2>
                    <ul class="nav_list">
                        <li @click="navActive=16" :class="{'active' : navActive===16}"><i>&squarf;</i>其他男歌手</li>
                        <li @click="navActive=17" :class="{'active' : navActive===17}"><i>&squarf;</i>其他女歌手</li>
                        <li @click="navActive=18" :class="{'active' : navActive===18}"><i>&squarf;</i>其他组合/乐队</li>
                    </ul>
                </div> -->
            </div>
            <!-- 显示动态变化的路由的对应组件 -->
            <div class="listr">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            artist: [
                {
                    name:"华语",
                    area:7,
                    list: [
                        {name:"华语男歌手", type:1},
                        {name:"华语女歌手", type:2},
                        {name:"华语组合/乐队", type:3},
                    ],
                },
                {
                    name:"欧美",
                    area:96,
                    code:200,
                    list: [
                        {name:"欧美男歌手", type:1},
                        {name:"欧美女歌手", type:2},
                        {name:"欧美组合/乐队", type:3},
                    ],
                },
                {
                    name:"日本",
                    area:8,
                    code:200,
                    list: [
                        {name:"日本男歌手", type:1},
                        {name:"日本女歌手", type:2},
                        {name:"日本组合/乐队", type:3},
                    ],
                },
                {
                    name:"韩国",
                    area:16,
                    code:200,
                    list: [
                        {name:"韩国男歌手", type:1},
                        {name:"韩国女歌手", type:2},
                        {name:"韩国组合/乐队", type:3},
                    ],
                },
                {
                    name:"其他",
                    area:0,
                    code:200,
                    list: [
                        {name:"其他男歌手", type:1, id:2001},
                        {name:"其他女歌手", type:2, id:2002},
                        {name:"其他组合/乐队", type:3, id:2003},
                    ],
                },

            ]
        }
    },
    computed: {
        name() {
            if (this.$route.query.name == undefined) return "华语男歌手";
            return this.$route.query.name;
        },
        area() {
            if (this.$route.query.area == undefined) return 7;
            return this.$route.query.area;
        },
        type() {
            if (this.$route.query.type == undefined) return 1;
            return this.$route.query.type;
        },
        initial() {
            if(this.$route.query.initial == undefined) return -1;
            return this.$route.query.initial
        } 
    },
    methods: {
        Go(item,item1) {
            this.$router.push({
                path: "/discover/artist/list",
                query: {
                    name: item1.name,
                    area: item.area,
                    type: item1.type,
                },
            });
            this.$router.go(0);
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.artist_in {
    .listl {
        width: 180px;
        background-color: #F9F9F9;
        border: 1px solid #D7D7D7;
        padding: 40px 20px;
        .nav {
            border-bottom: 1px solid #D3D3D3;
            padding-bottom: 5px;
            padding-top: 20px;
            .nav_title {
                width: 160px;
                height: 25px;
                font-size: 16px;
                font-weight: bolder;
                color: #333;
                padding: 0 0 0 14px;
                display: flex;
                align-items: center;
            }
            .nav_list {
                li {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    a {
                        color: #333;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    i {
                        width: 30px;
                        line-height: 30px;
                        text-align: center;
                        font-weight: bolder;
                        color: #AFAFAF;
                    }
                }
                .active {
                    border: 1px solid #e2e2e2;
                    border-radius: 2px;
                    a {
                        color: #c20c0c;
                    }
                    i {
                        color: #c20c0c;
                    }
                }
            }
        }
    }
    .listr {
        width: 720px;
        background-color: #fff;
        border-right: 1px solid #D7D7D7;
        padding: 40px;
    }
}
</style>